<style scoped>
  @import "banner-edit.css";
</style>
<template>
  <div>
    <Input class="input-item" type="number" v-model="cdata.autoplay" style="width: 230px;margin: 2px;">
      <span slot="prepend">自动播放时间:</span>
    </Input>
    <Card v-for="(item,index) in cdata.list" class="banner-edit-card" style="">
      <QActionEdit :flag="index" @action-data-change="selected" :init-item="item"></QActionEdit>
      <div class="banner-edit-del-wrap">
        <Icon type="ios-trash-outline" class="banner-edit-del" :size="26" @click.native="del(index)"></Icon>
      </div>

    </Card>
    <div class="add-wrap">
      <Button @click="add" class="add-btn">
        <Icon type="md-add-circle" size="20"/>
      </Button>
    </div>
  </div>

</template>
<script>
    import QActionEdit from '../../action-edit'
    export default {
        name: 'qbanner-edit',
        props: {
            cdata: {
                type: Object,
                default: function () {
                    return {list: [], autoplay: 3000};
                }
            }
        },
        components: {
            QActionEdit
        },
        data() {
            return {
            }
        },
        created() {

        },
        methods: {
            selected(data) {
                this.cdata.list[data.flag] = data.data;
            },
            add() {
                this.cdata.list.push({type: 0, img: []})
            },
            del(index) {
                this.cdata.list.splice(index, 1);
            }
        }
    }
</script>
